import React from 'react';
  import { motion } from 'framer-motion';
  import { toast } from 'sonner';
  
  interface ShareModalProps {
    onClose: () => void;
  }
  
  const ShareModal: React.FC<ShareModalProps> = ({ onClose }) => {
    // 获取当前页面URL作为分享链接
    const shareUrl = window.location.origin;
    
    // 使用Web Share API分享
    const handleShare = async () => {
      try {
        if (navigator.share) {
          await navigator.share({
            title: '支出记录',
            text: '这是一个简单实用的支出记录应用，快来试试吧！数据保存在本地，安全私密。',
            url: shareUrl,
          });
          toast('分享成功');
          onClose();
        } else {
          // 降级处理：复制链接
          handleCopyLink();
        }
      } catch (error) {
        console.error('分享失败:', error);
        // 降级处理：复制链接
        handleCopyLink();
      }
    };
    
    // 复制链接到剪贴板
    const handleCopyLink = async () => {
      try {
        await navigator.clipboard.writeText(shareUrl);
        toast('链接已复制到剪贴板');
        onClose();
      } catch (error) {
        console.error('复制链接失败:', error);
        // 降级处理：显示链接供用户手动复制
        const textArea = document.createElement('textarea');
        textArea.value = shareUrl;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        toast('链接已复制到剪贴板');
        onClose();
      }
    };
    
    // 点击遮罩层关闭弹窗
    const handleOverlayClick = (e: React.MouseEvent) => {
      if (e.target === e.currentTarget) {
        onClose();
      }
    };
    
    // 阻止事件冒泡
    const handleContentClick = (e: React.MouseEvent) => {
      e.stopPropagation();
    };
    
    return (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
        onClick={handleOverlayClick}
      >
        <motion.div
          initial={{ scale: 0.9, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0.9, opacity: 0 }}
          transition={{ type: 'spring', damping: 25, stiffness: 300 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-100 dark:border-gray-700 w-full max-w-md"
          onClick={handleContentClick}
        >
          <div className="p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-bold text-gray-900 dark:text-white">分享与部署</h2>
              <button
                onClick={onClose}
                className="p-2 rounded-full text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                aria-label="关闭"
              >
                <i className="fas fa-times"></i>
              </button>
            </div>
            
            {/* 部署说明 */}
            <div className="mb-6">
              <h3 className="text-lg font-medium text-gray-800 dark:text-gray-200 mb-3">部署指南</h3>
             <div className="bg-gray-50 dark:bg-gray-700/50 p-4 rounded-lg mb-4">
               <p className="text-sm text-gray-700 dark:text-gray-300 mb-2">
                 <i className="fas fa-server mr-2 text-blue-500"></i>
                 这是一个纯前端应用，可以部署到任意静态网站托管服务，如：
               </p>
               <ul className="list-disc list-inside text-xs text-gray-600 dark:text-gray-400 ml-4 space-y-1">
                 <li>Gitee Pages (推荐国内用户)</li>
                 <li>GitHub Pages</li>
                 <li>Vercel</li>
                 <li>Netlify</li>
                 <li>Cloudflare Pages</li>
               </ul>
             </div>
              
              <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                <p className="text-sm text-blue-800 dark:text-blue-200 mb-2">
                  <i className="fas fa-shield-alt mr-2"></i>
                  数据安全说明：
                </p>
                <p className="text-xs text-blue-700 dark:text-blue-300 ml-4">
                  所有消费记录均存储在用户本地浏览器的localStorage中，不会上传到服务器。
                  部署后，每个用户访问应用时看到的都是自己本地的数据，完全私密安全。
                </p>
              </div>
            </div>
            
            {/* 分享按钮 */}
            <div className="mb-4">
              <h3 className="text-lg font-medium text-gray-800 dark:text-gray-200 mb-3">分享应用</h3>
              <div className="flex flex-col space-y-3">
                <motion.button
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  onClick={handleShare}
                  className="px-6 py-3 bg-blue-500 text-white font-medium rounded-lg flex items-center justify-center space-x-2 hover:bg-blue-600 transition-colors"
                >
                  <i className="fas fa-share-alt"></i>
                  <span>使用系统分享</span>
                </motion.button>
                
                <motion.button
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  onClick={handleCopyLink}
                  className="px-6 py-3 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium rounded-lg flex items-center justify-center space-x-2 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                >
                  <i className="fas fa-link"></i>
                  <span>复制当前链接</span>
                </motion.button>
              </div>
            </div>
            
            {/* 使用提示 */}
            <div className="bg-gray-50 dark:bg-gray-700/50 p-3 rounded-lg">
              <p className="text-xs text-gray-600 dark:text-gray-400">
                <i className="fas fa-lightbulb mr-2 text-yellow-500"></i>
                提示：将应用部署后，您和朋友可以通过同一个URL访问，但各自的数据完全独立，互不干扰。建议将应用添加到手机主屏幕，获得更好的使用体验。
              </p>
            </div>
          </div>
        </motion.div>
      </motion.div>
    );
  };
  
  export default ShareModal;